'use strict';
/*
	使用示范
	<Mymodal
		title={'是否使用'+this.props.appname+'?'}
		visible={this.state.modalvisible}
		close={this._onPressModalClose}
		ok={this._onPressModalok}
	></Mymodal>
*/

import React, { Component } from 'react';

import {
  StyleSheet,
  View,
  TouchableHighlight,
  Modal,
  Text,
} from 'react-native';

class mymodal extends Component {
	constructor(props) {
	  super(props);
	
	  this.state = {
	  	modalVisible:true
	  };
	}



  	render() {
	    return (
			<Modal
	          	transparent={true}
	          	visible={this.props.visible}
	          	onRequestClose={() => {}}
	        >
	          	<View style={styles.modalview}>
	          		<View style={styles.innerContainer}>
	          			<View style={styles.modaltitle}>
	          				<Text style={{fontSize:20}}>{this.props.title}</Text>
	          			</View>
	          			<TouchableHighlight 
	          				style={styles.modalbutton}
	          				onPress={this.props.ok}
	          				underlayColor="#a9d9d4"
	          			>
	          				<Text style={{fontSize:30}}>确定</Text>
	          			</TouchableHighlight>
	          			<TouchableHighlight 
	          				onPress={this.props.close}
	          				style={styles.modalbutton}
	          				underlayColor="#a9d9d4"
	          			>
	          				<Text style={{fontSize:30}}>取消</Text>
	          			</TouchableHighlight>

	          		</View>
	          	</View>
	        </Modal>
	    );
 	}
}

const styles = StyleSheet.create({
	modalview:{
		flex: 1,
	    justifyContent: 'center',
	    padding: 20,
		backgroundColor:'rgba(0, 0, 0, 0.3)',
	},
	innerContainer: {
		alignItems:'stretch',
	    borderRadius: 10,
	    backgroundColor: '#fff',
	    elevation:10,
	},
	modaltitle:{
		alignItems:'center',
		justifyContent:'center',
		marginTop:20,
		marginBottom:20,
	},
	modalbutton:{
		flex:1,
		padding:3,
		alignItems:'center',
		justifyContent:'center',
		marginBottom:20,
		//backgroundColor:'lightgreen'
	}
});


export default mymodal;